//获取元素
var go = document.getElementsByClassName("go")[0];//开始
var timeshow = document.getElementById("timeShow");//定时器
var main = document.getElementsByClassName("main")[0]; // 方块的容器
var timer = null; //定时器
var speed = 5;  //设定的速度
var count = 0;  //积分器
var flag = true;  //加锁
var countShow = document.getElementsByClassName("countShow")[0];  //分数显示
var color = ["black", "black", "black", "black"];  //颜色数组

function goStart() {
	//给开始按钮绑定事件
    go.addEventListener("click", function() {
        this.style.display = "none";
		timeShow.style.display="inline";
        cDiv();//点击开始按钮立刻在第一行创建一行
        move(); //容器移动
		time();//计时
    })
}
goStart();


function move() {
    clearInterval(timer); //移动前先清除已有定时器
    timer = setInterval(function() {

    	//改变top值使得容器开始向下移动
        main.style.top = parseInt(main.offsetTop) + speed + "px";
        if (parseInt(main.offsetTop) >= 0) { //如果第一行的top值已经到达0的位置，则在第一行新创建一行，并且将容器重新拉回原来开始的位置 
            cDiv();
            main.style.top = "-150px";
        }
        var len = main.childNodes.length;
        if (len == 6) { //如果容器有6个节点，说明最后一行已经超出了容器。第一行也已经生成
            for (var i = 0; i < 4; i++) {
            	//判断每一行的每一个节点看是否它的类名列表里有"i";有的话清除定时器，弹出分数
                if (main.childNodes[len - 1].childNodes[i].classList.contains("i")) {
                    clearInterval(timer);
					clearInterval(time);
					timeShow.style.display="none";
                    flag = false;   //游戏结束，flag赋值为false
                    alert("你的分数是：" + count);
                }
            }
            // console.log("正在移出最后一个div");
            //将超出容器的最后一行移除
            main.removeChild(main.childNodes[len - 1]);
        }
    }, 30);

    bindEvent();
}



//创建行和列
function cDiv() {

    var oDiv = document.createElement("div");
    oDiv.className = "row";//创建行，并且给行设定一个row类名
    for (var i = 0; i < 4; i++) {
        var iDiv = document.createElement("div");
        oDiv.appendChild(iDiv); //for循环，创建4个div ，每创建一个div就塞进每行
    }


    if (main.childNodes.length == 0) { //如果当前main,没有div。那就直接插入
        // console.log("现在我是第一个div")
        main.appendChild(oDiv);
    } else {    
        // console.log("正在在第一个位置插入")
        main.insertBefore(oDiv, main.childNodes[0]);  //如果已经有了行，就在最前面的那一行插入  insertBefore(newNode,site);
    }
    var index = Math.floor(Math.random() * 4);  //随机生成0 1 2 3
    var clickDiv = main.childNodes[0].childNodes[index];    //将要点击的方块随机生成
    clickDiv.className = "i";  //点击的方块给一个类名 i
    clickDiv.style.backgroundColor = color[index];    //给点击的方块添加随机的颜色
}




//给每一个div绑定事件，利用事件委托
function bindEvent() {
    main.addEventListener('click', function(event) {
        var tar = event.target;
        if (flag == true) {  //这里加锁，游戏开启前flag 为true ，如果游戏结束了则赋值为false
            if (tar.className == "i") {  //点击到类名为"i"的方块，背景颜色改变，并且将类名"i"移除
                tar.style.backgroundColor = "#ffffff";
                count++;
                tar.classList.remove("i");
				// tar.disable(true);
                // console.log("分数正在加1")
                countShow.innerHTML = fm2(count);  //分数显示
                if (count % 10 == 0) {    //如果分数是10的倍数，速度+1
                    speed++;
                }
            } else if(!tar.classList.contains("main")){ //  如果你点击的不是容器，才让空白的方块颜色改变。并且清除定时器，弹出弹出框
            	// console.log(this)
                tar.style.backgroundColor = "red";
				clearInterval(time);
                clearInterval(timer);
                setTimeout(function() { //这里定时器解决执行先后的问题，让方块的颜色先变为red再弹出弹出框
                    alert("游戏结束，你的分数是：" + count+" 用时:"+timeShow.innerHTML);
                }, 500)
                flag = false;  //游戏结束赋值为false
				timeShow.style.display="none";
            }
        }

    })
}

//时间开始
function time(){
	var hm=0,fm=0,miao=0;
	var timer2=setInterval(function(){//每10毫秒刷新一次
		hm++;
		if(hm%10==0){
			fm++;
			hm=0;
			if(fm%10==0){
				miao++;
				fm=0;
			}
		}
		timeShow.innerHTML=fm2(miao)+":"+fm+hm;//时间显示
	},10)

}

//时间显示格式
function fm2(m) {
    if (m < 10) {
        return "0" + m;
    } else {
        return m;
    }
}